<!-- 
日期选择条组件 
使用方法：
<datebarcomponent v-on:change="changeDatebar"></datebarcomponent>

import datebarcomponent from '@/pages/csm/components/datebarcomponent.vue'

components: {
	datebarcomponent
},
		
param: {
	datecontrolvalue:uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd'),
}

changeDatebar(val){
	let that = this;
	that.param.datecontrolvalue = val;
	that._initPage(false);
},
-->
<template>
	<view class="c-wrap">
		<view class="c-block">
			<u-row class="a-datebar ">
				<u-col span="1" class="a-left" @click="datecontrolSubtractDate"><u-icon name="arrow-left"></u-icon></u-icon></u-col>
				<u-col span="10"  class="a-center" @click="datecontrolOpen"><view style="text-align: center;">{{param.datecontrol.value}}</view></u-col>
				<u-col span="1" class="a-right" @click="datecontrolAddDate"><u-icon name="arrow-right"></u-icon></u-col>
			</u-row>
			<u-calendar  :showTitle="false" color="Coral" monthNum="12" :show="param.datecontrol.isshow" :title="$t('ccore.msg.select')"  :confirmText="$t('ccore.btn.confirm')"
				@confirm="datecontrolConfirm" @close="datecontrolClose()"></u-calendar>
		</view>
	</view>
</template>

<script>
	import moment from "@/static/assets/csm/js/moment"
	export default {
		props: {
			//默认值
			currentval: {
				type:String,
			},
		},
		data() {
			return {
				sp: {},
				param: {
					// 日期选择控件
					datecontrol: {
						value: this.currentval,
						isshow: false,
					},
				},
				sr: {
					list: {}
				},
			}
		},
		created() {
			let that = this;
			that._initPage();
			uni.$on('onComponentShow', (data) => {
				that._initPage();
			})
		},
		methods: {
			_initPage(isForceDisplay) {
				let that = this;
			},
			clickSignup: function(e) {
				let that = this;
			},
			//选择日期
			datecontrolOpen() {
				let that = this;
				that.param.datecontrol.isshow = (that.param.datecontrol.isshow === true) ? false : true;
			},
			//日期控件点击确定
			datecontrolConfirm(e) {
				let that = this;
				that.param.datecontrol.isshow = false;
				that.param.datecontrol.value = e[0];
				that._initPage(false);
				that._triggerParent();
			},
			//点击下一天
			datecontrolAddDate() {
				let that = this;
				let addDateString = moment(that.param.datecontrol.value).add(1, 'd').format('YYYY-MM-DD');;
				that.param.datecontrol.value = addDateString;
				that._initPage(false);
				that._triggerParent();
			},
			//点击上一天
			datecontrolSubtractDate() {
				let that = this;
				let addDateString = moment(that.param.datecontrol.value).subtract(1, 'd').format('YYYY-MM-DD');;
				that.param.datecontrol.value = addDateString;
				that._initPage(false);
				that._triggerParent();
			},
			//点击关闭日期框
			datecontrolClose(e) {
				let that = this;
				that.param.datecontrol.isshow = false;
			},
			_triggerParent(){
				let that = this;
				this.$emit("change",that.param.datecontrol.value);
			}
		}
	}
</script>

<style lang="scss">
	/*顶部的日期选择bar*/
	.a-datebar {
		font-size: 14px;
		line-height: 18px;
		font-weight: bold;

		.a-left {
			text-align: left !important;
		}

		.a-center {
			text-align: center;
		}

		.a-right {
			text-align: right !important;
		}
	}
</style>
